<template>
  <Form :model="optionModel" class="diy-setting-form" layout="vertical">
    <Collapse v-model:active-key="state.activeCollapseKey" ghost>
      <template v-for="(propsTagGroup, key) in propsRegisted" :key="key">
        <template v-for="registeProps in propsTagGroup" :key="registeProps.tag">
          <CollapsePanel :key="registeProps.tag" :header="registeProps.tag" v-if="isShowPanel(registeProps)" class="diy-setting-collapse-panel">
            <template v-for="(editorConfig, propName, index) in registeProps.props" :key="index">
              <component
                v-if="hasPropEditor(propName, editorConfig.editor) && propName"
                :is="getPropEditor(propName, editorConfig.editor)"
                :designer="designer"
                v-model:value="selectedWidget.props[propName]"
                :selected-widget="selectedWidget"
                :optionModel="optionModel"
                :editorProps="editorConfig.editorProps"
                :propName="propName"
              />
            </template>
          </CollapsePanel>
        </template>
      </template>
    </Collapse>
  </Form>
</template>
<script lang="ts" name="diy-form-setting" setup>
  import { ref, watch, onMounted, provide, PropType } from "vue"
  import { useRuleFormItem } from "/@/hooks/component/useFormItem"
  import { useI18n } from "/@/hooks/web/useI18n"
  import { Input } from "ant-design-vue"
  import type { Designer } from "../../type"
  const { t } = useI18n("diyForm")
  import { Collapse, CollapsePanel, Form } from "ant-design-vue"
  import useSetting from "./useSetting"
  const currProps = defineProps({
    // 通过标签分组的属性, key: tag, value: 分组数据集合
    propsRegisted: { type: Object },
    scrollerHeight: { type: Number },
    designer: { type: Object as () => Designer },
  })
  const state = ref({
    activeKey: "comp",
    activeCollapseKey: "基础",
  })
  const optionModel = ref<any>()
  const selectedWidget = ref<any>({
    type: "diy-form-setting",
    formItemFlag: true,
    settingForm: {
      labelWidth: "95px",
      labelAlign: "left",
    },
    props: currProps.designer?.globalConfig,
  })
  const { isShowPanel, hasPropEditor, getPropEditor, updateFormItemConfig } = useSetting(selectedWidget, currProps)
  onMounted(() => {})
  watch(
    () => selectedWidget.value.props,
    (val: any) => {
      console.log("formProps", val)
      updateFormItemConfig(currProps.designer)
    },
    {
      deep: true,
      immediate: true,
    }
  )
  onMounted(() => {})
</script>

<style lang="less"></style>
